<template>
	<div class="grid-layout-container">
		<el-card class="box-card">
			<template #header>
				<div class="homeQueryBox flex-startCenter">
					<span class="mr10 personal-edit-title">客户年龄</span>
					<section class="flex-centerNew fontHeight30">
						(
						<el-image class="fontHeight26" :src="women"  />
						<span class="font16">&nbsp;女性&nbsp;100&nbsp;</span>	
						<el-image class="fontHeight26" :src="man"  />
						<span class="font16">&nbsp;男性&nbsp;80&nbsp;</span>
						<el-image class="fontHeight26" :src="unknown"  />
						<span class="font16">&nbsp;未知&nbsp;3&nbsp;</span>
						)
					</section>
				</div>
			</template>
			<section class="px10" style="height:320px;">
				<el-row :gutter="10">
					<el-col v-for="(item,index) in state.data" :key="index" :span="5" :class="index < 5 ? 'mb10' : ''">
						<div class="itemBox">
							<section>
								<el-image style="width: 64px; height: 64px;" :src="item.iconUrl"  />
							</section>
							<div>
								<p class="font17">{{ item.num }}</p>
								<p class="font16">{{ item.value }}</p>
							</div>
						</div>
					</el-col>
				</el-row>
			</section>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive } from 'vue';
import man from '/@/assets/images/man.png?url';
import women from '/@/assets/images/women.png?url';
import unknown from '/@/assets/images/unknown.png?url';
import people from '/@/assets/images/people.png?url';
// 定义变量内容
const state = reactive({
	data: [
		{ value: '17岁以下', num: 2942, iconUrl: people, },
		{ value: '18-24岁', num: 2942, iconUrl: people, },
		{ value: '25-29岁', num: 2942, iconUrl: people, },
		{ value: '30-34岁', num: 2942, iconUrl: people, },
		{ value: '35-39岁', num: 2942, iconUrl: people, },
		{ value: '40-44岁', num: 2942, iconUrl: people, },
		{ value: '45-49岁', num: 2942, iconUrl: people, },
		{ value: '50-54岁', num: 2942, iconUrl: people, },
		{ value: '55岁以上', num: 2942, iconUrl: people, },
		{ value: '未知年龄', num: 2942, iconUrl: people, }
	],
});
</script>

<style scoped lang="scss">

.grid-layout-container {
	.box-card :deep(.el-card__header){
		padding: 10px 10px !important;
	}
	.box-card :deep(.el-card__body){
	}
	.box-card :deep(.el-card__body){
		padding: 0px !important;
	}
	.personal-edit-title {
		position: relative;
		padding-left: 10px;
		color: var(--el-text-color-regular);
		line-height: 22px;
		&::after {
			content: '';
			width: 4px;
			height: 18px;
			line-height: 22px;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background: var(--el-color-primary);
			border-radius: 2px;
		}
	}
	.itemBox{
		height: 145px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		p{
			text-align: center;
		}
	}
}

// 部分高度跟随字体布局
[data-fontsize='small'] {
	@for $i from 10 through 54 {
		.fontHeight#{$i} {
			height: calc(#{$i}px - 4px);
		}
	}
}

// 默认字体大小
[data-fontsize='default'] {
	@for $i from 10 through 54 {
		.fontHeight#{$i} {
			height: #{$i}px !important;
		}
	}
}
// 大型字体大小
[data-fontsize='large'] {
	@for $i from 10 through 54 {
		.fontHeight#{$i} {
			height: calc(#{$i}px + 4px) !important;
		}
	}
}

:deep(.el-col-5) {
	width: 20%;
	flex: 0 0 20%;
}
</style>
